<!-- 导入地图 -->
<template>
  <view class="">

    <view class="page-body">
      <view class="right">
        <view class="card" @click="goToCard">
          <img src="../static/images/tabbar/coupon1.png" class="coupon">
          <text class="text">卡券</text>
        </view>
        <view class="xing" @click="goToXing">
          <img src="../static/images/tabbar/car.png" class="coupon">
          <text class="text">行程</text>
        </view>

      </view>
      <view class="page-section page-section-gap">
        <map style="width: 100%; height: 69vh;"
             id="mapDom"
             show-location
             :latitude="latitude"
             :longitude="longitude"
             :markers="covers"
             show-location
             @updated="lodingMap"
        >
        </map>

        <div @click="backPositionHandle" class="positionIcon"></div>
      </view>
    </view>
    <view class="footer">

      <input class="input1" v-model="value" :type="type" placeholder="输入你的" @click="goToTake"/>
      <input class="input2" v-model="value" :type="type" placeholder="输入你的目的地" @click="getHereHandle"/>
      <!--      <view class="text-area">-->
      <!--        <text @click="toMap()" class="title">{{ title }}</text>-->
      <!--      </view>-->
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      messageDto: {
        advancedTime : '',
        message : '',
        orderId : '',
        rang : '',
        receiveId : ''
      }
    }
  },
  onLoad() {
    this.onSocket()
  },
  methods: {
    onSocket() {
      uni.connectSocket({
        url: 'ws://127.0.0.1:8082/websocket/taxi/1204'
      });
      uni.onSocketOpen(function (res) {
        console.log('WebSocket连接已打开！');
        // uni.sendSocketMessage({
        //   data: "你好！"
        // });
        uni.onSocketMessage(function (res) {
          this.messageDto =  JSON.parse(res.data)

          // 显示弹窗
          uni.showToast({
            icon: 'none', // 设置图标为无
            duration: 2500, // 设置持续时间为 1 秒
            mask: true, // 显示遮罩层
            title: JSON.stringify(this.messageDto.message, null, 2)
          });
        });
      });
      uni.onSocketError(function (res) {
        console.log('WebSocket连接打开失败，请检查！');
      });
    },
    getHereHandle() {
      this.$tab.navigateTo('/pages/mine/search/index')
    },
    backPositionHandle() {
      if (!this.flag) return
      this.mapDom.moveToLocation();
    },
    goToCard() {
      this.$tab.navigateTo('/pages/mine/tail/mycard')
    },
    goToXing() {
      this.$tab.navigateTo('/pages/mine/order/index')
    },
    goToTake(){
      this.$tab.navigateTo('/pages/mine/take/index')
    }
  }
}
</script>

<style>

.input1 {
  position: relative;
  top: 40px;
  font-size: 20px;
  padding-left: 18px;
  width: 100%;
  height: 90upx;
  border: 3px solid #4eab8c;
  border-radius: 35upx;
}

.input2 {
  position: relative;
  top: 80px;
  font-size: 20px;
  padding-left: 18px;
  width: 100%;
  height: 90upx;
  border: 3px solid #4eab8c;
  border-radius: 35upx;
}

.page-section-gap {
  position: relative;
}

.right {
  //border-width: 0px;
  position: absolute;
  z-index: 1;
  left: 340px;
  top: 56px;
  border-radius: 10px;
  width: 44px;
  height: 106px;
  display: flex;
  justify-content: space-around;
  background-color: #f8f8f8;
  flex-direction: column;
}

.coupon {
  width: 34px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.xing {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.text {
  display: flex;
  font-size: 10px;
  // 文字居中
  justify-content: center;
}

.footer {
  border: 1px solid #eee;
  width: 100%;
  height: 25vh;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20upx 40upx 0 40upx;
  display: flex;
  flex-direction: column;
  border-radius: 22upx;
  align-items: center;
}

.position {
  height: 90upx;
  line-height: 90upx;
  background-color: #3d89f0;
  color: #fff;
  width: 100%;
}

.descriptive {
  font-size: 30upx;
  margin: 30upx 0 30upx 0;
}

.positionIcon {
  width: 40upx;
  height: 40upx;
  border-radius: 50%;
  position: absolute;
  bottom: 40upx;
  right: 40upx;
  background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.fCPxTGJccQvVdqrNFqrMRwHaHa?pid=ImgDet&rs=1');
  background-size: 100% 100%;
}
</style>


<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      latitude: 0,-->
<!--      longitude: 0,-->
<!--      covers: [{-->
<!--        id: 1,-->
<!--        width: 50,-->
<!--        height: 50,-->
<!--        latitude: 0,-->
<!--        longitude: 0,-->
<!--        iconPath: '../../static/1.gif'-->
<!--      },],-->
<!--      city: '',-->
<!--      flag: false-->
<!--    }-->
<!--  },-->
<!--  onReady() {-->
<!--    this.mapDom = uni.createMapContext('mapDom')-->
<!--    console.log(423, this.mapDom);-->
<!--  },-->
<!--  onLoad(option) {-->
<!--    this.covers[0].latitude = Number(option.lat)-->
<!--    this.covers[0].longitude = Number(option.lng)-->
<!--    this.city = option.city-->
<!--    //  uni.getLocation 不触发直接将基础库调整为 2.17.0-->
<!--    uni.getLocation({-->
<!--      type: 'gcj02',-->
<!--      success: (res) => {-->
<!--        console.log('当前位置的经度：' + res.longitude);-->
<!--        console.log('当前位置的纬度：' + res.latitude);-->
<!--        this.latitude = Number(res.latitude)-->
<!--        this.longitude = Number(res.longitude)-->
<!--        // 获取位置成功之后进行缩放，直观的看到坐标-->
<!--        // includePoints 缩放视野展示所有经纬度-->
<!--        this.mapDom.includePoints({-->
<!--          padding: [140, 50, 140, 50],-->
<!--          points: [-->
<!--            //第一个是我的位置-->
<!--            {-->
<!--              latitude: this.latitude,-->
<!--              longitude: this.longitude-->
<!--            },-->
<!--            // 第二个是店铺的位置-->
<!--            {-->
<!--              latitude: this.covers[0].latitude,-->
<!--              longitude: this.covers[0].longitude-->
<!--            }-->
<!--          ]-->
<!--        })-->
<!--      }-->
<!--    });-->
<!--  },-->
<!--  methods: {-->
<!--    // 地图初始化完成后触发-->
<!--    lodingMap() {-->
<!--      console.log(423);-->
<!--      this.flag = true-->
<!--    },-->
<!--    getHereHandle() {-->
<!--      if (!this.flag) return-->
<!--      // let plugin = requirePlugin('routePlan');-->
<!--      // let key = '2J4BZ-3CFEV-OYSPG-UDFGU-ONNNS-63FOT';  //使用在腾讯位置服务申请的key-->
<!--      // let referer = 'navigateMap';   //调用插件的app的名称-->
<!--      // let endPoint = JSON.stringify({  //终点-->
<!--      //   'name': '北京西站',-->
<!--      //   'latitude': 39.894806,-->
<!--      //   'longitude': 116.321592-->
<!--      // });-->
<!--      // wx.navigateTo({-->
<!--      //   url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint-->
<!--      // });-->
<!--      uni.openLocation({-->
<!--        latitude: this.covers[0].latitude,    //维度-->
<!--        longitude: this.covers[0].longitude, //经度-->
<!--        name: this.city,    //目的地定位名称-->
<!--        scale: 15,    //缩放比例-->
<!--        // address: "河南省鹤壁市浚县"    //导航详细地址-->
<!--      })-->

<!--    },-->
<!--    backPositionHandle() {-->
<!--      if (!this.flag) return-->
<!--      this.mapDom.moveToLocation();-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
